/**热销推荐 */
<template>
  <div>
    <div class="title">热销推荐</div>
    <ul>
      <li class="item border-bottom" v-for="item of recommendList" v-bind:key="item.id">     
        <img class="item-img" v-bind:src="item.url" alt="" />
        <div class="item-info">
          <p class="item-info-title">{{item.title}}</p>
          <p class="item-info-desc">{{item.desc}}</p>
          <button class="item-info-btn">查看详情</button>
        </div>
      </li>
    </ul>    
  </div>
</template>
<script>
export default {
  name: "HomeRecommend",
  data() {
    return {
      aaa:'123',
      recommendList: [
        {
          id: "0001",
          url:require("../../../assets/imgpro/Pro (1).jpg"),
          title: "贵安水世界",
          desc: "大大大海洋世界大大大海洋世界大大大海洋世界"
        },
        {
          id: "0002",
          title: "罗源湾海洋世界",
          url:require("../../../assets/imgpro/Pro (2).jpg"),
          desc: "大大大海洋世界大大大海洋世界大大大海洋世界"
        },
        {
          id: "0003",
          title: "福建天门山",
          url:require("../../../assets/imgpro/Pro (3).jpg"),
          desc: "大大大海洋世界大大大海洋世界大大大海洋世界"
        },
        {
          id: "0004",
          title: "贵安欢乐世界",
          url:require("../../../assets/imgpro/Pro (4).jpg"),
          desc: "大大大海洋世界大大大海洋世界大大大海洋世界"
        },
        {
          id: "0005",
          title: "闽江夜游",
          url:require("../../../assets/imgpro/Pro (5).jpg"),
          desc: "大大大海洋世界大大大海洋世界大大大海洋世界"
        },
        {
          id: "0006",
          title: "福清永鸿水世界",
          url:require("../../../assets/imgpro/Pro (6).jpg"),
          desc: "大大大海洋世界大大大海洋世界大大大海洋世界"
        }
      ]
    };
  }
};
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/mixins.styl'
.title 
  margin-top: 0.2rem;
  line-height: 0.8rem;
  background: #eee;
  text-indent: 0.2rem;
.item
  overflow :hidden
  display :flex
  height :1.9rem
  .item-img
    padding 0.1rem
    width :1.7rem
    height :1.7rem
  .item-info
    flex:1
    padding :.1rem
    .item-info-title
      line-height:.54rem
      font-size:.32rem
    .item-info-desc
      line-height :.4rem
      color:#ccc
      ellipsis()
    .item-info-btn
      line-height :.34rem
      margin-top :.16rem
      background :#ff9300
      padding :.1rem
      border-radius .06rem
      color:#fff
</style>


